<template>
  <div>
    <div class="nav_top">
      <!-- 头文字 -->
      <b style="font-size: 0.25rem;">M Y &nbsp;C A R T</b>
      <br />
      <br />

      <!-- 头标签 -->
      <div class="top-1">
        <el-row :gutter="0">
          <el-col :span="5">
            <div @click="fh" style="color:rgb(1, 16, 0)" class="grid-content bg-purple">返回</div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">Particular</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">Pirce</div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">Quantity</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">Total</div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">Del</div>
          </el-col>
        </el-row>
      </div>
      <div class="top-2" v-for="(item, index) in list" :key="index">
        <el-row :gutter="0">
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <img :src="item.productImage" width="50%" alt />
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">{{item.productName}}</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">{{item.salePrice}}</div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <van-stepper v-model="item.num" />
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">{{item.salePrice*item.num}}</div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <van-icon @click="deleteioc(index,item)" name="delete" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: JSON.parse(localStorage.getItem("lts")) || []
    };
  },

  methods: {
    deleteioc(index, item) {
      this.list.splice(index, 1);
      localStorage.lts = JSON.stringify(this.list);
    },
    fh() {
      window.history.back();
    }
  }
};
</script>

<style  scoped>
.grid-top {
  width: 50%;
  margin: 0 auto;
}
* {
  font-size: 0.16rem;
}
.nav_top {
  width: 92%;
  height: 86vh;

  margin: 0 auto;
  margin-top: 5%;
}

.top-1 .bg-purple {
  background: #858585;
}

.top-1 .grid-content {
  min-height: 5vh;
  line-height: 5vh;
  text-align: center;
  font-weight: 700;
}
.back {
  background-color: white;
  width: 100%;
  height: 80vh;
}

.top-2 .grid-content {
  border-bottom: 1px solid rgb(226, 221, 221);
  line-height: 20vh;
  height: 20vh;
  font-weight: 700;
  text-align: center;
}
.top-2 .bg-purple {
  background: #ffffff;
}
</style>